<template>
  <div id="summary">
    <div id="pie-box" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    width: {
      type: String,
      default: '300px',
    },
    height: {
      type: String,
      default: '300px',
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    name: {
      type: String,
      default: '',
    },
    center: {
      type: Array,
      default: () => (['50%', '50%']),
    },
    radius: {
      type: String,
      default: '50%',
    },
    series: {
      type: Array,
      default: () => ([]),
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  computed: {
    getSeries() {
      return this.series || [];
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initPie()
      window.addEventListener('resize', this.initPie);
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initPie);
  },
  methods: {
    initPie() {
      this.myChart = this.$echarts.init(document.getElementById('pie-box'));
      this.getSeries.length && this.setOption();
      this.myChart.resize({
        // width: document.getElementById('summary').offsetWidth
      });
    },
    setOption() {
      // let seriesData = [];
      // let selected = {};
      let data = this.series;
      let center = this.center;
      let radius = this.radius;
      let name = this.name || '';
      // for (let i = 0; i < data.length; i++) {
      //   let name = data[i].name;
      //   seriesData.push({
      //     name: data[i].name,
      //     value: data[i].value
      //   });
      //   selected[name] = i < 10;
      //   console.log(selected[name] = i < 10);
      // }
      // console.log(data, seriesData, selected)
      let option = {
        title: this.option.title,
        tooltip: this.option.tooltip,
        legend: {
          ...this.option.legend,
          // selected: selected
        },
        series: [
          {
            name: name,
            type: 'pie',
            radius: radius,
            top: '10%',
            center: center,
            // label: {
              // position: 'inside',
              // formatter: '{a} {b} {c} {d}%'
            // },
            width: '90%',
            height: '78%',
            // data: seriesData,
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            // minShowLabelAngle: 0,
            minAngle: 3
          },
        ],
      };

      this.myChart.on('click', params => {
        this.$emit('changeRegion', params)
      });

      option && this.myChart.setOption(option);
    },
  },
};
</script>
